<template lang="">
  <div data-v-6bdabae4="" class="home_box fix">
	<div class="home_box_inner">
		<div class="home_box_top fix">
			<span class="primary_bg"></span>
			<img v-lazy="getAssetsImages('home/title_venue.png')" height="34">
			<p>{{ $t('zhen') }}</p>
		</div>
		<div class="game_venue fix">
			<div class="game_venue_left">
				<ul>
					<li 
						@click="gotoPage('Sport')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids2.png') +')'" >
						<!-- <img v-lazy="getAssetsImages('home/game_venue_tiyu.png')" width="243"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('tiYu') }}</h3>
							<p class="primary_color">{{ $t('sport') }}</p>
							<span class="primary_bg"></span>
						</div>
					</li>
					<li 
						@click="gotoPage('Casino')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids1.png') +')'">
						<!-- <img v-lazy="getAssetsImages('home/game_venue_zhenren.png')" width="262"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('zhen-0') }}</h3>
							<p class="primary_color">{{ $t('live') }}</p>
							<span class="primary_bg"></span>
						</div>
					</li>
				</ul>
			</div>
			<div class="game_venue_right">
				<ul>
					<li 
						@click="gotoPage('Lottery')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids3.png') +')'">
						<!-- <img v-lazy="getAssetsImages('home/game_venue_caipiao.png')" width="204"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('caiP') }}</h3>
							<p class="primary_color">LOTTERY</p>
							<span class="primary_bg"></span>
						</div>
					</li>
					<li 
						@click="gotoPage('Chess')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids6.png') +')'">
						<!-- <img v-lazy="getAssetsImages('home/game_venue_qipai.png')" width="183"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('qiPa') }}</h3>
							<p class="primary_color">{{ $t('chess') }}</p>
							<span class="primary_bg"></span>
						</div>
					</li>
					<li 
						@click="gotoPage('Esport')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids4.png') +')'">
						<!-- <img v-lazy="getAssetsImages('home/game_venue_jingji.png')" width="240"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('dian-3') }}</h3>
							<p class="primary_color">E-SPORTS</p>
							<span class="primary_bg"></span>
						</div>
					</li>
					<li 
						@click="gotoPage('SlotMachine')"
						:style="'background-image: url('+ getAssetsImages('home/gamekids5.png') +')'">
						<!-- <img v-lazy="getAssetsImages('home/game_venue_youyi.png')" width="214"> -->
						<div class="game_venue_name">
							<h3 class="primary_color">{{ $t('dian-4') }}</h3>
							<p class="primary_color">{{ $t('slot') }}</p>
							<span class="primary_bg"></span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</template>
<script setup lang="ts">
import { getAssetsImages } from '@/utils';
import { useRouter } from 'vue-router';

const router = useRouter();
function gotoPage(name: string) {
	router.push({
		name: name
	})
}
useRouter
</script>
<style lang="">
  
</style>